<template>
  <Cell title="单选题">
    <template #link>
      <div class="title">
        <span class="titleText">{{ i + 1 }}</span>
        <span>/{{ questions.num }}</span>
      </div>
    </template>
  </Cell>
  <div class="top">
    <p>{{ question.question }}</p>
  </div>
  <div class="top">
    <RadioGroup v-model="radioVal" class="radioGroup">
      <Radio label="1">A: {{ question.ans[0] }}</Radio>
      <Radio label="2">B: {{ question.ans[1] }}</Radio>
      <Radio label="3">C: {{ question.ans[2] }}</Radio>
      <Radio label="4">D: {{ question.ans[3] }}</Radio>
    </RadioGroup>
  </div>
  <div class="top">
    <Button v-show="btnShow" type="primary" style="width: 100%" @click="handleClick">确定</Button>
  </div>

  <OverLay v-model:visible="overLayShow" :z-index="2000" :close-on-click-overlay="false">
    <div class="wrapper">
      <p class="title">本次答对题目数</p>
      <p class="num">{{ right }}</p>
      <Button class="btn" type="primary" @click="handleOverlayClick">重新开始</Button>
    </div>
  </OverLay>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { Cell, RadioGroup, Radio, Button, OverLay } from '@nutui/nutui';
import { createRandomQuestion } from '../utils/question';

const i = ref(0);
const radioVal = ref('0');
const right = ref(0);
const questions = reactive(createRandomQuestion());

const overLayShow = ref(false);

const btnShow = computed(() => {
  return radioVal.value !== '0';
});

const question = computed(() => {
  return questions.question[i.value];
});

const handleClick = () => {
  if (question.value.ans[Number(radioVal.value) - 1] === question.value.rightAns) {
    right.value++;
  }

  if (i.value == questions.num - 1) {
    overLayShow.value = true;
  } else {
    i.value += 1;
    radioVal.value = '0';
  }
};

const handleOverlayClick = () => {
  overLayShow.value = false;
  i.value = 0;
  right.value = 0;
  radioVal.value = '0';

  const { question, num } = createRandomQuestion();
  questions.num = num;
  questions.question = question;
};
</script>

<style lang="scss">
.top {
  margin-top: 25px;
}

.title {
  display: flex;
  align-items: baseline;

  .titleText {
    font-size: 34px;
  }
}
.wrapper {
  background-color: white;
  padding: 25px;
  border-radius: 5px;
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .title {
    margin: 0;
  }
  .num {
    font-size: 34px;
    margin: 10px 0 0;
  }
  .btn {
    float: right;
    margin-top: 25px;
    margin-left: 25px;
  }
}
</style>
